<template>
  <div ref="mark" class="mark">
    <div v-for="item in groupList" :key="item.GroupId">
      <h4>
        {{ item.GroupName }}
      </h4>
      <ul class="oul">
        <li 
            @touchstart="touchstart"
            @touchmove="touchmove"
            @touchend="touchend"
            v-for="items in item.GroupList"
            :key="items.SerialID">
          <img :src="items.Picture" alt="" />
          <div>
            <p>
              {{ items.AliasName }}
            </p>
            <p>
                <span>
                    {{ items.DealerPrice }}
                </span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["groupList"],
  data() {
      return {
          moveInfo: {
            //  按下的位置
            prevPos: "",
            //  当前的位置
            curPos: ""
          },
          // 判断是否是长按
          timer: null,
          flag: false
      }
  },
  methods: {
      // 按下   
      touchstart({ touches }) {
        this.timer = setTimeout(() => {
          // 保存按下的位置 
          this.moveInfo.prevPos = touches[0]
          console.log('start')
        }, 100)
        this.$router.push('/detail')
      },
      // 移动 
      touchmove({ touches }) {
          // 保存移动的位置
          this.moveInfo.curPos = touches[0]
          let delXWidth = this.moveInfo.curPos.pageX - this.moveInfo.prevPos.pageX
          let delYHight = this.moveInfo.curPos.pageY - this.moveInfo.prevPos.pageY
          
          // 控制可以斜着移动
          if (Math.abs(delYHight) > Math.abs(delXWidth)) {
              return
          }

          // 如果 delXWidth<0不移动
          if (delXWidth < 0) {
              delXWidth = 0
          }
          // 设置mark的位置
          this.$refs.mark.style.transform = `translateX(${delXWidth}px)`
        //   console.log('move', delXWidth)
      },
      // 抬起   
      touchend() {
          // 如果移动的位置超过屏幕的三分之一   
          // 移动的位置   
          let moveWith = this.moveInfo.curPos.pageX - this.moveInfo.prevPos.pageX
          if (moveWith > window.innerWidth * 0.3) {
              //  切换成总屏幕宽度的0.7倍 
              // ${window.innerWidth * 0.7}
              this.$refs.mark.style.transform = `translateX(${window.innerWidth * 0.7})`
              this.$emit('close', false)
          } else {
              this.$refs.mark.style.transform = `translateX(0px)`
              this.$emit('close', false)
          }
      },
      // 跳转详情
      pushDetail() {
        this.$router.push('/detail')
      }
  }
};
</script>

<style lang="scss" scoped>
.mark {
  width: 70%;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  overflow: scroll;
  background: #fff;
  animation: slidein .3s linear;
  h4 {
    height: 38px;
    color: #666;
    font-size: 28px;
    background: #f4f4f4;
    padding-left: 30px;
    line-height: 38px;
  }
  .oul {
    li {
      display: flex;
      img {
        width: 180px;
        height: 120px;
      }
      > div {
        padding: 10px 20px;
        p {
          font-size: 34px;
          color: #5f687a;
          span {
              color: orangered;
              font-size: 28px;
          }
        }
      }
    }
  }
}

@keyframes slidein {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
    // transform: 
  }
}
</style>